<template>
   <div>
    <chart-card ref="chart" v-if="chartData && chartData.labels.length > 0" :height="height">
    </chart-card>
    <div v-else class="noData">暂无数据</div>
  </div>
</template>

<script>
import ChartCard from '../../components/ChartCard';
import line from './line'
export default {
  components: {
    ChartCard
  },
  data() {
    return {
      height: '300px'
    }
  },
  props: {
    chartData: {
      type: Object,
      default: () => {}
    },
  },
  methods: {
    renderChart() {
      this.$nextTick(() => {
        line.render(this.$refs.chart, line.getOptions(this.dealChartData))
      })
    }
  },
  computed: {
    dealChartData() {
      return { chartData: this.chartData }
    }
  },
  watch: {
    chartData: {
      handler() {
        this.renderChart()
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
.noData {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>